<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script>
	function selectText() {
	    var selectionText = "";
	    if (document.getSelection) {
	        selectionText = document.getSelection();
	    } else if (document.selection) {
	        selectionText = document.selection.createRange().text;
	    }
	    return selectionText;
	}
	
	document.onmouseup = function() {
	//    document.getElementById("console").innerHTML = selectText();
		var selectedText = selectText();
		console.log("selectedText = " + selectedText);
	}

function changeColor() {
	var textSpan = document.createElement("span");
	textSpan.innerHTML = selectText();
	textSpan.style.color = "red";
	document.getElementById("content").appendChild(textSpan);
}
</script>
</head>
<body>
<input type="button" class="toolButton" onclick="changeColor()" value="change color">
<div id="editorContainer">
	<div id="content" class="content" contenteditable="true">
		
	</div>
</div>
</body>
</html>